<template>
	<view class="content">
		<view class="weui-search-bar">
			<view class="weui-search-bar__form" :class="[{'fullScreen': !showMore}, {'weui-search-bar__form':true}]">
				<!-- 搜索框 -->
				<view class="weui-search-bar__box">
					<icon class="weui-icon-search_in-box" type="search" size="14"></icon>
					<input type="text" v-if="showCarNo" v-model="searchData.vehicleNo" class="weui-search-bar__input" placeholder="请输入车牌号" @confirm="searchBycar" />
					<picker v-else @change="bindPicker1ChangeTop" :value="index1" mode="selector" :range="custList" :range-key="rangeKey[0]">
						<view class="uni-input">{{customerName}}</view>
					</picker>
				</view>
			</view>
			<!-- 搜索按钮,调用搜索查询方法 -->
			<view class="weui-search-bar__cancel-btn" @click="searchBycar">搜索</view>
			<view class="weui-search-bar__cancel-btn btn-more" v-if="showMore" @click="searchMore">更多</view>
		</view>
		<uni-popup class="searchPop" ref="searchPop">
			<view class="searchBox">
				<view class="title">
					<text class="til">筛选</text>
					<uni-icons class="close-icon" @click="closeLinepop" type="closeempty" size="40rpx" color="#333"/>
				</view>
				<view class="top">
				<view class="items" v-if="showState">
					<text class="til">车牌号：</text>
					<input type="text" style="margin-left:-2px;" v-model="searchData.vehicleNo" class="" placeholder="请输入车牌号"/>
				</view>
				<view class="items" v-if="showCustomer">
					<text class="til">客户：</text>
					<picker @change="bindPicker1Change" :value="index1" mode="selector" :range="custList" :range-key="rangeKey[0]">
						<view class="uni-input" :class="{ isactive: index1 }">{{customerName}}</view>
					</picker>
					<!-- <input type="text" v-model="searchDatas.customer" class="" placeholder="请输入车牌号"/> -->
				</view>
				<view v-if="showState" class="items">
					<text class="til">状态：</text>
					<picker @change="bindPicker2Change" mode="selector" :value="index2" :range="stateList" :range-key="rangeKey[1]">
						<view class="uni-input" :class="{ isactive: index2 }">{{statusName}}</view>
					</picker>
					<!-- <input type="text" v-model="searchDatas.status" class="" placeholder="请输入车牌号"/> -->
				</view>
				<view class="items">
					<text class="til">时间：</text>
					<uni-datetime-picker style="margin-left:-4px;" v-model="range" type="datetimerange" @change="bindPicker3Change">
					</uni-datetime-picker>
					<!-- <input type="text" v-model="searchDatas.time" class="" placeholder="请输入车牌号"/> -->
				</view>
				<view class="btn">
					<button class="btn2" type="primary" plain @click="resetForm">重置</button>
					<button class="btn1" type="primary" plain @click="confirmForm">确认</button>
				</view>
			</view>
		    </view>
		</uni-popup>
		<!-- 筛选列表 -->
		<!-- <view class="uni-tab" v-if="showTab">
			<view>
				<picker @change="bindPicker1Change" :value="index1" mode="selector" :range="custList" :range-key="rangeKey[0]">
					<view class="uni-input" :class="{ isactive: index1 }">客户</view>
				</picker>
			</view>
			<view v-if="showState == 1">
				<picker @change="bindPicker2Change" mode="selector" :value="index2" :range="stateList" :range-key="rangeKey[1]">
					<view class="uni-input" :class="{ isactive: index2 }">状态</view>
				</picker>
			</view>
			<view>
				<uni-datetime-picker v-model="range" type="daterange" @change="bindPicker3Change">
					<view class="uni-input" :class="{ isactive: range.length > 0 }">时间</view>
				</uni-datetime-picker>
			</view>
			<view>
				<view class="uni-input" @click="resetClick">重置</view>
			</view>
		</view> -->
	</view>
</template>

<script>
export default {
	name: 'top-search',
	props: {
		showTab: {
			type: Boolean,
			default: true
		},
		showMore: {
			type: Boolean,
			default: true
		},
		showSearch: {
			type: Boolean,
			default: true
		},
		showCarNo: {
			type: Boolean,
			default: true
		},
		showState: {
			type: Boolean,
			default: true
		},
		showCustomer: {
			type: Boolean,
			default: true
		},
		custList: {
			type: Array,
			default: []
		},
		stateList: {
			type: Array,
			default: []
		},
		rangeKey: {
			type: Array,
			default: []
		}
	},
	data() {
		return {
			range: [],
			index2: 0,
			index1: null,
			statusName: '请选择状态',
			customerName: '请选择客户',
			searchData: {
				vehicleNo:undefined,
				customerId: undefined,
				waybillStatus: undefined,
				startTime:undefined,
				endTime:undefined,
			}
		};
	},
	methods: {
		closeLinepop(){
			this.$refs['searchPop'].close();
		},
		resetForm(){
			this.searchData = {
				vehicleNo:undefined,
				customerId: undefined,
				waybillStatus: undefined,
				startTime:undefined,
				endTime:undefined,
			}
			this.range = []
			this.index1 = null
			this.customerName = '请选择客户'
		},
		confirmForm(){
			console.log('提交的表单值为', this.searchData);
			this.$emit('confirmChange', this.searchData);
			this.$refs['searchPop'].close();
		},
		bindPicker3Change(e) {
			console.log('maskClick事件:', e);
			this.searchData.startTime = e[0]
			this.searchData.endTime = e[1]
			// this.$emit('bind3Change', e);
		},
		searchBycar() {
			console.log('搜索', this.searchData);
			this.$emit('bindChange', this.searchData);
		},
		searchMore(){
			this.$refs['searchPop'].open('bottom');
		},
		bindPicker2Change: function (e) {
			this.index2 = e.detail.value;
			this.statusName = this.stateList[this.index2].waybillStatusName
			this.searchData.waybillStatus = this.stateList[this.index2].waybillStatus
			// this.$emit('bind2Change', this.stateList[this.index2]);
		},
		bindPicker1ChangeTop(e){
			console.log('picker2发送选择改变，携带值为', this.custList);
			this.index1 = e.detail.value;
			this.customerName = this.custList[this.index1].customerName
			this.searchData.customerId = this.custList[this.index1].id
		},
		bindPicker1Change(e){
			this.index1 = e.detail.value;
			this.customerName = this.custList[this.index1].customerName
			this.searchData.customerId = this.custList[this.index1].id
			// this.$emit('bind1Change', this.custList[this.index1]);
		},
		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();

			if (type === 'start') {
				year = year - 60;
			} else if (type === 'end') {
				year = year + 2;
			}
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			return `${year}-${month}-${day}`;
		},
		bindDateChange: function (e) {
			this.date = e.detail.value;
		}
	}
};
</script>

<style lang="scss" scoped>
.searchBox{
	background: #fff;
	font-size: 14px;
	.title{
		text-align: center;
		height: 46px;
		line-height: 44px;
		position: relative;
		.close-icon{
			position: absolute;
			cursor: pointer;
			right: 38rpx;
		}
	}
	.top{
		padding: 20rpx;
		.items{
			display: flex;
			justify-content: start;
			height: 40px;
			line-height: 40px;
			margin-bottom: 10px;
			.til{
				width:60px;
				margin-right: 20rpx;
			}
			picker{
				padding: 0 10rpx!important;
			}
			picker,input{
				width:81%;
				border: 1px solid #e5e5e5;
				border-radius: 4px;
				padding: 5rpx 10rpx;
				height: 40px;
				line-height: 40px;
				color: #999!important;
			}
			input::-webkit-input-placeholder {
				color: red;
				font-size: 14px;
			}
		}
		.btn{
			text-align: center;
			margin-top: 35rpx;
			height: 50px;
			button:first-child {
			    margin-right: 10rpx;
			}
			button {
			    height: 45px !important;
			    line-height: 45px !important;
				width: 49%;
				float: left;
			}
			button.btn1 {
				background-color: #409EFE!important;
				border: 1rpx solid #409EFE!important;
				color: #fff!important;
			}
			button.btn2 {
			    background-color: #D9D9D9!important;
				border: 1rpx solid #D9D9D9!important;
				color: #333!important;
			}
		}

	}
}

.content {
	.weui-search-bar {
		display: flex;
		padding-bottom: 10rpx;
		align-items: center;
		justify-content: flex-start;
		border-bottom: 1rpx solid #d7d6dc;
		position: relative;
	}

	.weui-icon-search_in-box {
		padding-left: 5rpx;
		margin-top: 19rpx;
		position: absolute;
	}

	.weui-search-bar__form {
		border-radius: 5px;
		background: #ffffff;
		width: 70%;
		margin: 0 10rpx 0 9rpx;
	}
    .weui-search-bar__form.fullScreen {
		width: 100%!important;
	}
    .weui-search-bar__box {
		padding: 0 10rpx;
		width: 100%;
		box-sizing: border-box;
		z-index: 1;
		border-radius: 8rpx;
		height: 35px;
		line-height: 35px;
		background: #F1F2F5;
		picker{
			margin-left: 24px;
		}
	}
	.weui-search-bar__input {
		height: 35px;
		line-height: 35px;
		font-size: 14px;
		margin-left: 24px;
	}
	.weui-search-bar__input::-webkit-input-placeholder {
		color: red;
		font-size: 14px;
	}

	.btn-more{
		position: absolute;
		right: 16rpx;
	}

	.uni-tab {
		display: flex;
		padding: 20rpx 40rpx;
		justify-content: space-between;
		border-bottom: 1px solid #ccc;
		.isactive {
			color: #409EFE;
		}
		.uni-input {
			padding: 5rpx 30rpx;
		}

		text {
			color: #aaa;
		}
	}
}
</style>
